<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过滤器</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/dayjs.min.js"></script>
</head>
<body>
<div id="root">
    <!-- computed实现 -->
    <h2>显示格式化后的时间:{{fmtTime}}</h2>
    <!-- methods实现 -->
    <h2>显示格式化后的时间:{{getFmtTime()}}</h2>
    <!-- 过滤器实现-->
    <h2>显示格式化后的时间:{{time | timeFormater("YYYYMM月DD日 HH:mm:ss") | mySlice}}</h2>
    <h2>显示格式化后的时间:{{time | timeFormater}}</h2>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false
    // 配置全局过滤器
    Vue.filter("mySlice", function () {
        return value.slice(0, 4)
    })

    const vm = new Vue({
        el: "#root",
        data: {
            time: 1736404224415
        },
        computed: {
            fmtTime() {
                return dayjs(this.time).format("YYYY-MM-DD HH:mm:ss")
            }
        },
        methods: {
            getFmtTime() {
                return dayjs(this.time).format("YYYY-MM-DD HH:mm:ss")
            }
        },
        // 局部过滤器
        filters: {
            timeFormater(t, fmt = "YYYY-MM-DD HH:mm:ss") {
                return dayjs(t).format(fmt)
            },
        }
    })
</script>

</body>
</html>